<template>
  <div class="course-box">
    <div class="search-box">
      <el-button type="primary" @click="goCreateCourse">新建课程</el-button>
      <div class="search-item">
        <el-input v-model="keyCourseName" placeholder="请输入班级名称" style="width:200px;" />
        <el-button type="primary">搜索</el-button>
      </div>
    </div>
    <el-table :data="courseTableData" border style="width: 100%;">
      <el-table-column prop="courseName" label="班级名称" align="center" />
      <el-table-column prop="teachingMode" label="授课模式" align="center" />
      <el-table-column label="收费模式" align="center" width="200">
        <template slot-scope="scope">
          <span v-show="scope.row.chargeMode.length<=1">{{ scope.row.chargeMode.join('') }}</span>
          <span v-show="scope.row.chargeMode.length >1">{{ scope.row.chargeMode.join(' / ') }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="openClassNum" label="开班数" align="center" />
      <el-table-column prop="ArrangeClassNum" label="排课节数" align="center" />
      <el-table-column prop="relevanceCourse" label="关联正式课商品数" align="center" />
      <el-table-column prop="createTime" label="创建时间" align="center" width="160" />
      <el-table-column label="操作" align="center" width="220">
        <template slot-scope="scope">
          <el-button type="text" @click="goschedule">排课</el-button>
          <el-button type="text" @click="goRecruit(scope.row.id)">售课</el-button>
          <el-button type="text" @click="goCreateCourse($event,scope.row.id)">编辑</el-button>
          <el-button type="text">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      keyCourseName: '',
      courseTableData: [
        {
          id: '1',
          courseName: '速成班',
          teachingMode: '班课',
          chargeMode: ['按课时', '按时段', '按班级'],
          openClassNum: '5',
          ArrangeClassNum: '10',
          relevanceCourse: '0',
          createTime: '2019-06-01 19:36'
        }
      ],
      classInfo: {
        id: '1',
        courseName: '速成班',
        teachingMode: '班课',
        chargeMode: ['按课时', '按时段', '按班级',],

        belongCourse: '语文作文',
        startTime: '2019-06-01',
        endTime: '2019-06-03',
        classStatus: '已结班',
        applyPerson: '12',
        maxPerson: '100',
        classCount: '1',
        courseCount: '9',
        list: [
          {
            studentName: '刘德华',
            contact: '13133131313',
            signNum: '3',
            applyTime: '2019-06-01'
          }
        ]
      },
      currentPage: 1,
      pageSize: 5
    }
  },
  methods: {
    goCreateCourse(e, id) {
      // 新建课程不传递id，跳转页面课更换所属课程、
      // 编辑跳转传递id，跳转页面不可更换课程
      this.$router.push({ name: 'Createcourse', query: { 'courseId': id }})
    },
    goschedule() {
      this.$router.push({ name: 'Newschedule' })
    },
    goRecruit(id) {
      this.$router.push({ name: 'Newfacecourse', query: { 'courseId': id }})
    }
  }
}
</script>

<style lang="scss" scoped>
.course-box {
  padding: 20px;
  .search-box {
    margin-bottom: 20px;
    .search-item {
      float: right;
    }
  }
  .class-title {
    box-sizing: border-box;
    width: 100%;
    height: 100px;
    margin-bottom: 24px;
    padding: 20px 24px;
    background: #f5f7fa;
    .title {
      margin-bottom: 10px;
      color: #353535;
      font-weight: 700;
      font-size: 20px;
    }
    .tip {
      display: inline-block;
      margin-right: 30px;
      font-size: 14px;
      line-height: 22px;
      .label {
        margin-right: 20px;
        color: #888;
      }
      .content {
        color: #353535;
      }
    }
  }
}
</style>
